<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无限分类</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/jquery.easyui.min.js">
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <ul id="btn">
        <a href="#" class="easyui-linkbutton" type="1" onclick="changeType($(this).attr('type'))">新闻评论模块</a>
        <a href="#" class="easyui-linkbutton" type="2" onclick="changeType($(this).attr('type'))">产品模块</a>
        <a href="#" class="easyui-linkbutton" type="3" onclick="changeType($(this).attr('type'))">新闻模块</a>
        <a href="#" class="easyui-linkbutton" type="4" onclick="changeType($(this).attr('type'))">用户模块</a>
    </ul>

    <!-- <ul id="tt"></ul> -->
    <table id="tt" style="width:100%;height:100%;" data-options="toolbar:toolbar"></table>

    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="closed:true,iconCls: 'icon-save' " style="width:400px;height:180px;padding:10px ">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <input type="hidden" name="_id" />
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label: '分类名:',required:true ">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
</body>

</html>
<script>
    function changeType(type) {
        $('#tt').treegrid({
            url: `http://localhost:3000/cate/list/${type}`,
            idField: '_id',
            treeField: 'text',
            method: 'post',
            fit: true,
            onSelect: function(node) {
                // console.log(node._id);
            },
            columns: [
                [{
                    title: '主要类名',
                    field: 'text',
                    width: 180
                }, {
                    field: 'add',
                    title: '增加',
                    width: 60,
                    formatter: function(value, row, index) {
                        return `<a href = "javascript:addData( '${row._id}') " > 增加 </a>`;
                    }
                }, {
                    field: 'update',
                    title: '修改',
                    width: 80,
                    formatter: function(value, row, index) {
                        return `<a href="#" onclick="editData('${row._id}')">修改</a>`;
                    }
                }, {
                    field: 'delete',
                    title: '删除',
                    width: 80,
                    formatter: function(value, row, index) {
                        return `<a href="#" onclick="deleRows('${row._id}')">删除</a>`; /*deleRows*/
                        // console.log(row);
                    }
                }]
            ],
            toolbar: [{
                text: '添加类名',
                iconCls: 'icon-add',
                handler: function() {
                    $('#dlg').dialog('open');
                }
            }, {
                text: '删除多个',
                iconCls: 'icon-cut',
                handler: function() {
                    deleRows();
                }
            }]
        });
    }
    // 点击按钮切换树
    $("#btn a").on('click', function() {
        return changeType($(this).attr('type'));
        // console.log($(this).attr('type'));
    });

    // 表单验证
    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                //表单验证成功
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $('#ff').serializeJSON();
                    // console.log($('#tt').treegrid('getSelected'));
                    console.log(formData);
                    //添加按钮

                    var nodetype = parseInt($('#btn a:last-child').attr('type')) + 1;

                    function addBtn() {
                        // console.log(nodetype)
                        var add = $('#btn').append(`<a href="#" class="easyui-linkbutton l-btn l-btn-small"group="" type="4" id="" onclick="changeType($(this).attr('type'))"><span class="l-btn-left"><span class="l-btn-text">${formData.text}</span></span></a>`);
                        add = $("#btn a:last-child");
                        add.attr({
                            href: '#',
                            class: 'easyui-linkbutton l-btn l-btn-small',
                            type: nodetype = nodetype ? nodetype : 5
                        });
                        add.css({
                            'line-height': '28px',
                            'font-size': '14px',
                        })
                        add.children('span').css('text-align', 'center');

                    }
                    //是否存在上级节点
                    if ($('#tt').treegrid('getSelected')) {
                        //修改数据
                        if (formData._id.length > 0) {
                            $.ajax({
                                url: `http://localhost:3000/cate/${formData._id}`,
                                type: 'put',
                                data: formData
                            }).then(res => {
                                // console.log(res);
                                $('#dlg').dialog('close');
                                $('#tt').treegrid('reload');
                            })
                        } else {
                            //增加数据
                            delete formData._id;
                            formData.parentId = $('#tt').treegrid('getSelected')._id;
                            formData.type = $('#tt').treegrid('getSelected').type;
                            $.ajax({
                                url: `http://localhost:3000/cate`,
                                type: 'post',
                                data: formData
                            }).then(res => {
                                // console.log(res);
                                $('#dlg').dialog('close');
                                $('#tt').treegrid('reload');
                            })
                        }
                        //新增大分类
                    } else {
                        addBtn();
                        $('#ff').form('clear');
                        formData.type = $('#btn a:last-child').attr('type');
                        // formData.parentId = null;
                        delete formData._id;
                        console.log(formData);
                        $.ajax({
                            url: `http://localhost:3000/cate`,
                            type: 'post',
                            data: formData
                        }).then(res => {
                            console.log(res);
                            $('#dlg').dialog('close');
                            $('#tt').treegrid('reload');
                        })
                    }
                }
                return false;
            }
        });
    }
    //清空
    function clearForm() {
        $('#ff').form('clear');
    }
    //添加数据
    function addData(id) {
        // $('#ff').form('load', `${parent.globalUrl}cate/data`+id);
        clearForm();
        $('#dlg').dialog('open');
    }

    //修改数据
    function editData(id) {
        $('#ff').form('load', `http://localhost:3000/cate/${id}`);
        $('#dlg').dialog('open');
    }
    //删除数据
    function deleRows(id) {
        $.messager.confirm('确认', '您确定要删除吗?', function(r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/cate/${id}`,
                    type: 'delete'
                }).done(function(res) {
                    $('#tt').treegrid('reload');
                });
            }
        });

    }

    function addmain(text, type) {
        $.ajax({
            url: 'http://10.31.161.18:3000/cate',
            type: 'post',
            queryParams: {
                text: text,
                type: type
            }
        }).done(function() {
            $('#tt').treegrid('reload');
        });
    }
</script>